<template>
    <div class="flex-shrink-0 flex items-center function cursor-pointer bg-white">
        <slot name="front"></slot>
        <el-tooltip v-if="props.showView" content="查看" placement="bottom" effect="light">
            <div @click.stop="view" class="center cursor-pointer item">
                <svg class="iconpark-icon"><use href="#preview-open"></use></svg>
            </div>
        </el-tooltip>
        <el-tooltip v-if="props.showEdit" content="编辑" placement="bottom" effect="light">
            <div @click.stop="edit" class="center cursor-pointer item">
                <svg class="iconpark-icon"><use href="#edit"></use></svg>
            </div>
        </el-tooltip>
        <el-tooltip v-if="props.showDel" content="删除" placement="bottom" effect="light">
            <div @click.stop="del" class="center cursor-pointer item">
                <svg class="iconpark-icon"><use href="#delete"></use></svg>
            </div>
        </el-tooltip>
        <slot name="tail"></slot>
    </div>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{
    showEdit?: boolean;
    showDel?: boolean;
    showView?: boolean;
}>(), {
    showEdit: true,
    showDel: true,
    showView: false
});

const emit = defineEmits(['edit', 'del', 'view']);

const edit = () => emit('edit');

const del = () => emit('del');

const view = () => emit('view');
</script>

<style lang="scss" scoped>
.function {
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
    border-radius: 3px;
    border: 1px solid #D1D1D1;
    height: 28px;
    .center {
        width: 34px;
        height: 100%;
        &:not(:last-child) {
            border-right: 1px solid #d1d1d1;
        }
    }
}
</style>